<!-- 首页 -->
<template>
  <img class="bg" src="../../static/bg.png" alt="" />
  <img class="logo" src="../../static/logo.png" alt="" />
  <img class="kehangdai" src="../../static/kehangedai_ziti.png" alt="" />
  <img class="figure" src="../../static/figure.png" alt="" />
  <img class="phone" src="../../static/phone.png" alt="" />

  <div class="banner">
    <img class="banner_bg" src="../../static/banner_bg.png" alt="" />
    <div class="banner_content">
      <ul class="header">
        <li class="headerItem">
          <div class="headerIcon"></div>
          <div class="headerText">线上申请</div>
        </li>
        <li class="headerItem">
          <div class="headerIcon"></div>
          <div class="headerText">随用随还</div>
        </li>
        <li class="headerItem">
          <div class="headerIcon"></div>
          <div class="headerText">循环用信</div>
        </li>
        <li class="headerItem">
          <div class="headerIcon"></div>
          <div class="headerText">快速审批</div>
        </li>
      </ul>

      <div
        class="main"
        v-if="userState.pathStatus === '0' || userState.pathStatus === '1'"
      >
        <div class="mainTitle">
          <div class="titleLabel">授信额度</div>
          <div class="titleValue">最高可借（以实际审批为准）</div>
        </div>
        <div class="mainValue">
          <div class="loanNum">300,000</div>
          <div>元</div>
        </div>
        <div class="mainTip">年化利率（单利）最低<span>3.45%</span></div>
      </div>
      <div class="main" v-if="userState.pathStatus === '2'">
        <div class="mainValue">
          <div class="loanNum">贷款受理中</div>
        </div>
      </div>
      <div class="main" v-if="userState.pathStatus === '3'">
        <div class="mainTitle">
          <div class="titleLabel">授信额度</div>
        </div>
        <div class="mainValue">
          <div class="loanNum">{{ userState.creditLimit }}</div>
          <div>元</div>
        </div>
      </div>
      <div class="main" v-if="userState.pathStatus === '4'">
        <div class="mainTitle">
          <div class="titleLabel">授信额度</div>
        </div>
        <div class="mainValue">
          <div class="loanNum">{{ userState.creditLimit }}</div>
          <div>元</div>
        </div>
      </div>
      <div class="main" v-if="userState.pathStatus === '5'">
        <div class="mainTitle">
          <div class="titleLabel">授信额度</div>
        </div>
        <div class="mainValue">
          <div class="loanNum">{{ userState.creditLimit }}</div>
          <div>元</div>
        </div>
        <div class="mainTip">请至安徽农金手机银行提款</div>
      </div>
      <div class="main" v-if="userState.pathStatus === '6'">
        <div class="mainTitle">
          <div class="titleLabel">授信额度</div>
        </div>
        <div class="mainValue">
          <div class="loanNum">{{ userState.creditLimit }}</div>
          <div>元</div>
        </div>
        <div class="mainTip">您的合同已冻结，请联系专属客户经理！</div>
      </div>
      <div class="main" v-if="userState.pathStatus === '7'">
        <div class="mainTitle">
          <div class="titleLabel">授信额度</div>
        </div>
        <div class="mainValue">
          <div class="loanNum">{{ userState.creditLimit }}</div>
          <div>元</div>
        </div>
      </div>
      <div class="main" v-if="userState.pathStatus === '8'">
        <div class="mainTitle">
          <div class="titleLabel">授信额度</div>
        </div>
        <div class="mainValue">
          <div class="loanNum">{{ userState.creditLimit }}</div>
          <div>元</div>
        </div>
      </div>

      <div class="footer" v-if="userState.pathStatus === '0'">
        <div class="goLogin" @click="goLogin">去登录</div>
      </div>
      <div class="footer" v-if="userState.pathStatus === '1'">
        <div class="goLogin" @click="getLimit">获取额度</div>
      </div>
      <div class="footer" v-if="userState.pathStatus === '2'">
        <div class="goLogin" @click="goProgress(userState.orderId)">
          点击查看进度
        </div>
      </div>
      <div class="footer" v-if="userState.pathStatus === '3'">
        <div class="goLogin">额度激活中</div>
      </div>
      <div class="footer" v-if="userState.pathStatus === '4'">
        <div class="goLogin" @click="goContract">签署合同</div>
      </div>
      <div class="footer" v-if="userState.pathStatus === '5'">
        <div class="goLogin" @click="goDetail">查看详细</div>
      </div>
      <div class="footer" v-if="userState.pathStatus === '6'">
        <div class="goLogin" @click="goDetail">查看详细</div>
      </div>
      <div class="footer" v-if="userState.pathStatus === '7'">
        <div class="goLogin" @click="goDetail">查看详细</div>
        <div class="re" @click="getLimit">重新评估</div>
      </div>
      <div class="footer" v-if="userState.pathStatus === '8'">
        <div class="goLogin" @click="goDetail">查看详细</div>
        <div class="re" @click="remove">立即解除</div>
      </div>
      <div class="footer" v-if="userState.pathStatus === '99'">
        <div class="goLogin">未知错误</div>
      </div>
    </div>
  </div>
  <!-- swiper待完善 -->
  <div class="swiperArea">
    <img
      class="sskoo_banner_bg"
      src="../../static/sskoo_banner_bg.png"
      alt=""
    />
  </div>

  <!-- notice待完善 -->
  <div class="notice">
    <img
      class="tongzhigonggao_banner_bg"
      src="../../static/tongzhigonggao_banner_bg.png"
      alt=""
    />
    <div class="noticeContent">
      <div class="noticeImg">
        <img
          class="tongzhigonggao_icon"
          src="../../static/tongzhigonggao_icon.png"
          alt=""
        />
      </div>
      <ul class="noticeList">
        <li class="listItem">本产品不与中介合作，无需手续费，谨防诈骗</li>
        <li class="listItem">关于开展“科行e贷”教师节优惠活动的通知</li>
      </ul>
      <div class="moreNotice">
        <div>更多</div>
        <div class="moreIcon"></div>
      </div>
    </div>
  </div>

  <div class="advantage">
    <img
      class="kehangedai_banner_bg_top"
      src="../../static/kehangedai_banner_bg_top.png"
      alt=""
    />
    <div class="advantageArea">
      <img
        class="kehangedai_icon"
        src="../../static/kehangedai_icon.png"
        alt=""
      />
      <div class="advantageText">操作简单，一目了然</div>
      <div class="areaFooter">
        <img
          class="kehangedai_banner_bg_top_01"
          src="../../static/kehangedai_banner_bg_top_01.png"
          alt=""
        />
        <div class="footerContent">
          <div class="contentItem">
            <img
              class="contentIcon"
              src="../../static/yinhangchanping_icon.png"
              alt=""
            />
            <div class="itemText">银行产品</div>
          </div>
          <div class="line"></div>
          <div class="contentItem">
            <img
              class="contentIcon"
              src="../../static/anquankuaijie_icon.png"
              alt=""
            />
            <div class="itemText">安全快捷</div>
          </div>
          <div class="line"></div>
          <div class="contentItem">
            <img
              class="contentIcon"
              src="../../static/5dayoushi_icon.png"
              alt=""
            />
            <div class="itemText">5大优势</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { onShow, onLoad } from "@dcloudio/uni-app";
import config from "../../utils/config";
import * as http from "../../utils/http";
import { useAppStore } from "../../store";
const store = useAppStore();
// 假设是一个短链接进来的参数
onLoad((options) => {
  console.log("初始化option", options);
  let option = {
    busiType: "CLMS",
    code: "670777016409001984",
  };
  console.log(option);
  http
    .getWxCode()
    .then((res) => {
      http
        .getOpenId({
          wxCode: res,
          appId: config.appId,
          secret: config.secret,
        })
        .then((res) => {
          // 存储openid
          wx.setStorageSync("openId", res.data.openId);
          // 担保短信 option =>{busiType,code}
          // 私码option =>{qrCodeType,userNo,orgId}
          // BizType业务类型/参与人类型 借款人：1 保证人：2
          // config.source：来源：公码1私码2 担保人为公码
          // playerRelationType:参与人关系=> 本人：1 配偶：2 亲属：3  朋友：4  其他：9
          // playersId:参与人id
          if (option.code) {
            //担保人
            store.setBizType(2);
            wx.setStorageSync("playersType", 2);
            config.source = "1";
            http.linkAuth({ key: option.code }).then((res) => {
              let { applyType, playersId, playersRelationType } = res.data;
              store.setPlayersRelationType(playersRelationType);
              wx.setStorageSync("playersRelationType", playersRelationType);
              store.setBizId(playersId);
              wx.setStorageSync("bizId", playersId);
              store.setApplyType(applyType);
              wx.setStorageSync("applyType", applyType);
              wx.reLaunch({
                url: "../../packageLogin/login/login",
              });
            });
          }
          if (option.orgId) {
            //私码借款人
            store.setBizType("1");
            wx.setStorageSync("playersType", "1");
            config.source = "2";
            store.setPlayersRelationType("1");
            wx.setStorageSync("playersRelationType", "1");
          }
          if (!option.code && !option.orgId) {
            //公码借款人
            store.setBizType("1");
            wx.setStorageSync("playersType", "1");
            config.source = "1";
            store.setPlayersRelationType("1");
            wx.setStorageSync("playersRelationType", "1");
          }
        })
        .catch((res) => {});
    })
    .catch(() => {});
});
const userState = reactive({});
onShow(() => {
  http.show().then((res) => {
    userState.pathStatus = res.data.pathStatus;
    userState.creditLimit = res.data.creditLimit;
    if (res.data.orderId) {
      userState.orderId = res.data.orderId;
      wx.setStorageSync("orderId", res.data.orderId);
      store.setOrderId(res.data.orderId);
      wx.setStorageSync("orderNo", res.data.orderNo);
      store.setOrderNo(res.data.orderNo);
      wx.setStorageSync("creditId", res.data.creditId);
      store.setCreditId(res.data.creditId);
      wx.setStorageSync("bizId", res.data.bizId);
      store.setBizId(res.data.bizId);
      wx.setStorageSync("playersType", res.data.bizType);
      store.setBizType(res.data.bizType);
      if (res.data.fileMap) {
        wx.setStorageSync("fileMap", res.data.fileMap);
      }
    }
  });
});

// 登录
const goLogin = () => {
  uni.navigateTo({
    url: "../../packageLogin/login/login",
  });
};

// 获取额度
const getLimit = () => {
  wx.navigateTo({
    url: "../../packageCredit/cardOcr/cardOcr",
  });
};

// 签署合同
const goContract = () => {
  wx.navigateTo({
    url: "../../packageMine/signContract/signContract",
  });
};

// 查看详细
const goDetail = () => {
  wx.navigateTo({
    url: "../../packageMine/myLoan/myLoan",
  });
};

const remove = () => {
  wx.showToast({
    title: "请至安徽农金APP解除原合同",
    icon: "none",
    duration: 3000,
    mask: true,
  });
};

// 查看进度
const goProgress = () => {
  wx.navigateTo({
    url:
      "../../packageMine/applyDetail/applyDetail?value=" +
      JSON.stringify(userState.orderId),
  });
};
</script>

<style scoped lang="scss">
.bg {
  width: 750rpx;
  height: 873rpx;
  position: absolute;
  z-index: -99999;
}

.logo {
  width: 300rpx;
  height: 49rpx;
  position: absolute;
  left: 24rpx;
  top: 125rpx;
}

.kehangdai {
  width: 322rpx;
  height: 109rpx;
  position: absolute;
  left: 40rpx;
  top: 270rpx;
}

.figure {
  width: 153rpx;
  height: 192rpx;
  position: absolute;
  left: 479rpx;
  top: 233rpx;
}

.phone {
  width: 75rpx;
  height: 84rpx;
  position: absolute;
  left: 642rpx;
  top: 312rpx;
}

.banner {
  width: 100%;
  height: 510rpx;
  position: absolute;
  z-index: 9999;
  left: 0;
  top: 393rpx;
  color: #fff;

  .banner_bg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -999;
  }

  .banner_content {
    margin: 60rpx 60rpx;
    height: 390rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    .header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .headerItem {
        display: flex;
        align-items: center;

        .headerIcon {
          width: 12rpx;
          height: 12rpx;
          background-color: #fff;
          border-radius: 50%;
          margin-right: 10rpx;
        }

        .headerText {
          font-size: 24rpx;
        }
      }
    }

    .main {
      display: flex;
      flex-direction: column;
      align-items: center;

      .mainTitle {
        display: flex;
        align-items: flex-end;
        font-size: 24rpx;

        .titleValue {
          margin-left: 10rpx;
          font-size: 20rpx;
        }
      }

      .mainValue {
        width: 100%;
        height: 117rpx;
        font-size: 32rpx;
        display: flex;
        align-items: center;
        letter-spacing: 5px;
        text-shadow: 0px 4px 8px #144ec4;

        .loanNum {
          font-family: Microsoft Yahei;
          font-size: 90rpx;
          margin-right: 10rpx;
          letter-spacing: 0px;
        }
      }
    }

    .footer {
      display: flex;

      .goLogin {
        width: 240rpx;
        height: 64rpx;
        line-height: 64rpx;
        text-align: center;
        border-radius: 32rpx;
        background-color: #fff;
        color: #3277f2;
        font-size: 28rpx;
        font-weight: 600;
        margin: 0 10rpx;
      }
      .re {
        width: 240rpx;
        height: 64rpx;
        line-height: 64rpx;
        text-align: center;
        border-radius: 32rpx;
        color: #fff;
        border: 1rpx solid #fff;
        font-size: 28rpx;
        font-weight: 600;
        margin: 0 10rpx;
      }
    }
  }
}

.swiperArea {
  padding-top: 882rpx;
  position: relative;

  .sskoo_banner_bg {
    width: 734rpx;
    height: 234rpx;
    margin: 0 9rpx;
  }
}

.notice {
  position: relative;
  margin: 0 20rpx;

  .tongzhigonggao_banner_bg {
    width: 710rpx;
    height: 158rpx;
    position: absolute;
    z-index: -9999;
  }

  .noticeContent {
    width: auto;
    height: auto;
    padding: 20rpx 29rpx 34rpx 45rpx;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    .noticeImg {
      .tongzhigonggao_icon {
        width: 90rpx;
        height: 104rpx;
      }
    }

    .noticeList {
      align-self: center;
      margin-left: -20rpx;
      height: 76rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: start;

      .listItem {
        line-height: 30rpx;
        height: 30rpx;
        font-size: 22rpx;
      }
    }

    .moreNotice {
      margin-bottom: 8rpx;
      height: 25rpx;
      display: flex;
      align-items: center;
      font-size: 18rpx;
      color: #9c9c9c;

      .moreIcon {
        width: 10rpx;
        height: 10rpx;
        border-right: 1rpx solid #9c9c9c;
        border-bottom: 1rpx solid #9c9c9c;
        transform: rotate(-45deg);
      }
    }
  }
}

.advantage {
  .kehangedai_banner_bg_top {
    width: 738rpx;
    height: 391rpx;
    margin: 0 6rpx;
    position: absolute;
    z-index: -99999;
  }

  .advantageArea {
    padding: 52rpx 59rpx 47rpx 55rpx;

    .kehangedai_icon {
      width: 389rpx;
      height: 53rpx;
    }

    .advantageText {
      margin: 17rpx 0 0 18rpx;
      height: 33rpx;
      line-height: 33rpx;
      font-size: 24rpx;
      background-image: linear-gradient(to right, #3a8ff8, #4a74da);
      background-clip: text;
      color: transparent;
    }

    .areaFooter {
      margin: 15rpx 0 0 13rpx;
      height: 174rpx;

      .kehangedai_banner_bg_top_01 {
        width: 636rpx;
        height: 174rpx;
        position: absolute;
        z-index: -99999;
      }

      .footerContent {
        width: 636rpx;
        height: 174rpx;
        display: flex;
        justify-content: space-evenly;
        align-items: center;

        .contentItem {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .contentIcon {
            width: 53rpx;
            height: 56rpx;
            margin-bottom: 6rpx;
          }

          .itemText {
            color: #333333;
            font-size: 24rpx;
            font-weight: 500;
          }
        }

        .line {
          width: 1rpx;
          height: 97rpx;
          background-color: #979797;
          opacity: 22%;
        }
      }
    }
  }
}
</style>
